<template>
  <div>
    <div style="margin: 0px 20px 0px 10px">
      <div class="operation-line">
        <div class="search-group">
          <el-input v-model="queryName" placeholder="人员姓名"
                    style="width: 70%;margin-right: 15px"></el-input>
          <el-button type="primary" @click="getCardList">搜 索</el-button>
        </div>
        <div class="update-group">
          <el-button type="primary">添 加</el-button>
          <el-button type="danger">批量删除</el-button>
        </div>
      </div>
      <div>
        <el-table
          :data="cardList"
          border
          stripe
          fit="true"
          @selection-change="cardSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            align="center"
            width="55"></el-table-column>

          <el-table-column
            label="序号"
            align="center"
            width="55"
            type="index"></el-table-column>

          <el-table-column label="卡号" prop="cardNumber" align="center"/>
          <el-table-column label="人员编码" prop="personCode" align="center" width="180"/>
          <el-table-column label="人员姓名" prop="personName" align="center" width="180"/>
          <el-table-column label="授权状态" prop="authorizeStatus" align="center" width="130"/>
          <el-table-column label="授权通道数" prop="cardPrivilegeDetailCount" align="center"/>
          <el-table-column label="卡状态" prop="cardStatus" align="center"/>
          <el-table-column label="卡类型" prop="cardType" align="center" width="80">
          </el-table-column>
          <el-table-column label="部门Id" prop="deptId" align="center"/>
          <el-table-column label="部门名称" prop="deptName" align="center"/>
          <el-table-column label="记录id" prop="id" align="center">
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="primary" @click="showUpdate(scope)">修改</el-button>
              <el-button type="danger" @click="deleteId(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryCard.pageNum"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="queryCard.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="cardTotalRows"
          style="float: right">
        </el-pagination>

        <!--      &lt;!&ndash;   添加对话框   &ndash;&gt;
              <el-dialog
                title="添加开门计划"
                :visible.sync="insertDialog"
                :before-close="cancelUpdate"
                :close-on-click-modal="false"
                align="center"
                style="font-weight: bold"
                width="80%">
                <div>
                  <el-form ref="insertPlan" :model="insertPlan" label-width="80px" size="mini">
                    <el-form-item label="计划名称">
                      <el-input v-model="insertPlan.name"/>
                    </el-form-item>
                    <el-row v-for="(value,key,index) in insertPlan.detail">
                      <el-form-item :label="index | weekFilter">
                        <div :ref="key" class="time-range">
                          <el-col :span="6" v-for="(range,index) in value">
                            <el-input v-model="insertPlan.detail[key][index]" :placeholder="`第 ${index+1} 周`"
                                      class="range-input"></el-input>
                          </el-col>
                        </div>
                      </el-form-item>
                    </el-row>

                    <el-form-item label="备注">
                      <el-input v-model="insertPlan.memo" type="textarea" rows="3"/>
                    </el-form-item>
                  </el-form>
                </div>
                <span slot="footer">
                  <el-button @click="cancelInsert">取 消</el-button>
                  <el-button type="primary" @click="insertPlanSubmit">提 交</el-button>
                </span>
              </el-dialog>

              &lt;!&ndash;  详细计划对话框  &ndash;&gt;
              <el-dialog
                :title="currentPlan.name"
                :visible.sync="detailDialog"
                :before-close="closeDetailDialog"
                align="center"
                style="font-weight: bold"
                width="60%">
                <div style="font-weight: normal">
                  <el-table :data="detailArray"
                            border
                            stripe
                            fit="true"
                            style="width: 100%">
                    <el-table-column align="center" label="日期" prop="name"/>
                    <el-table-column align="center" label="第一周" prop="first"/>
                    <el-table-column align="center" label="第二周" prop="second"/>
                    <el-table-column align="center" label="第三周" prop="third"/>
                    <el-table-column align="center" label="第四周" prop="fourth"/>
                  </el-table>

                </div>
                <span slot="footer">
                  <el-button type="primary" @click="closeDetailDialog">关 闭</el-button>
                </span>
              </el-dialog>

              &lt;!&ndash;   修改对话框   &ndash;&gt;
              <el-dialog
                :title="currentPlan.name"
                :visible.sync="updateDialog"
                :before-close="cancelUpdate"
                align="center"
                style="font-weight: bold"
                width="80%">
                <div>
                  &lt;!&ndash;    遍历detail对象      &ndash;&gt;
                  <el-row v-for="(value,key,index) in updateDetail">
                    &lt;!&ndash;   遍历时间短数组         &ndash;&gt;
                    <el-col :span="4"><span class="update-span"> {{index | weekFilter}} </span></el-col>
                    <el-col :span="5" v-for="(range,index) in value">
                      <el-input v-model="updateDetail[key][index]" :placeholder="`第 ${index+1} 周`"
                                style="width: 200px"></el-input>
                    </el-col>
                  </el-row>
                </div>
                <span slot="footer">
                  <el-button @click="cancelUpdate">取 消</el-button>
                  <el-button type="primary" @click="updateSubmit()">提 交</el-button>
                </span>
              </el-dialog>-->
      </div>
    </div>
  </div>
</template>

<script>
  import {getAcsCardList} from "@/api/access";

  export default {
    name: "AcsCard",
    data() {
      return {
        cardList: [],
        queryCard: {
          pageNum: 1,
          pageSize: 5,
          param: {
            cardNumber: '',
            personName: '',
            personCode: '',
            authorizeStatus: '',
            taskStatus: ''
          }
        },
        queryName: '',
        cardTotalRows: undefined,
      }
    },
    filters: {
      authorizeStatusFilter: function (value) {
        switch (value) {
          case '1':
            return '未授权';
          case '2':
            return '已授权';
        }
      }
    },
    mounted() {
      this.getCardList();
    },
    methods: {
      getCardList() {
        getAcsCardList(this.queryCard).then(response => {
          let result = response.data
          this.cardList = result.pageData;
          this.cardTotalRows = result.totalRows;
        })
      },
      // 当每页个数改变时
      handleSizeChange() {

      },
      // 当页数改变时
      handleCurrentChange() {

      },
      //  删除时多选
      cardSelectionChange() {

      }
    }
  }
</script>

<style scoped>

</style>
